<!-- Vue3组件的<script setup>部分：处理管理员列表的数据加载和管理 -->
<script setup>
// 导入API接口adminApi：用于与后端进行管理员相关的数据交互
import adminApi from '@/api/adminApi.js'
// 从Vue中导入两个响应式API：创建响应式数据
import {reactive, ref} from 'vue';
// 导入路由实例
import router from '@/router'
// 导入组件
import {ElMessage, ElMessageBox} from 'element-plus';

// 使用ref创建一个响应式数组，存储管理员列表的数据
const admins = ref([])
// 使用reactive创建一个响应式对象，包含分页相关信息
const pageInfo = reactive({
    page: 1,
    limit:10,
    total:0
})
// 组件初始化时加载管理员数据
loadAdmins()

// 定义加载管理员列表的函数 请求后台获取管理员列表
function loadAdmins() {
    //分页信息作参调用adminApi.search方法
    adminApi.search(pageInfo).then(result=>{//Promise 链式调用中数据传递的逻辑：接收第一个.then()返回的值（response.data）存到result，结构为{code, msg, data: {list, total}}
        admins.value = result.data.list //请求成功后，返回的管理员列表数据赋值给admins
        pageInfo.total = result.data.total //更新总记录数
    })
}

// 查询函数
function onSearch() {
    // 还从第一页开始查询
    pageInfo.page = 1;
    loadAdmins()
}

const addVisible = ref(false) //响应式变量，控制"添加管理员"弹框的显示状态
const addAdmin = reactive({}) //响应式代理对象，存储添加管理员时的表单数据，直接指向原始数据的响应式版本
// 显示添加管理员弹框
function showAdd() {
    addVisible.value = true
    clearAddAdmin()
}
// 处理添加管理员的核心逻辑
function handleAdd() {
    //service.post(...)会返回一个Promise对象，在调用adminApi.add(addAdmin)时，.then()处理成功响应，.catch()处理错误
    adminApi.add(addAdmin).then(result=>{
        if (result.code == 200) {// 添加成功 
            // 关闭弹框/提示消息
            addVisible.value = false
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            // 刷新列表显示新添加的管理员
            loadAdmins()
            //法一：清空添加弹框里的数据
            // addAdmin.phone = ''
            // addAdmin.name = ''
            // addAdmin.password = ''
            //法二：调用遍历删除函数
            clearAddAdmin()
        } else{
            addVisible.value = false
            ElMessage.error('添加失败')
        }
    }).catch(error=>{
        // API调用失败时进入catch回调（如网络错误、服务器异常等）
        addVisible.value = false
        ElMessage.error('添加失败服务器忙，添加失败')
    })
}
// 删除添加管理员表单内容
function clearAddAdmin() {
  // 遍历所有属性并删除
  Object.keys(addAdmin).forEach(key => {
    delete addAdmin[key]
  })
}
//声明响应式变量 
const editVisible = ref(false)
//声明响应式变量，初始值为空对象，存储编辑弹窗中表单的数据
const editAdmin = ref({})
// 显示编辑框
function showEdit(row) {//row：表格中当前点击行的数据
    editVisible.value = true
    //JSON.stringify(row)：将row对象转为字符串；JSON.parse()：转回对象，实现对row的深拷贝
    //如果直接引用，表单中修改数据会实时影响表格显示，深拷贝后表单和表格的数据会相互独立，只有提交修改后才会同步
    editAdmin.value = JSON.parse(JSON.stringify(row))
    //清空，编辑时不显示原密码
    editAdmin.value.password = ""//如果清空放在深拷贝前面，则赋值报错
}
//reactive适合 “持续修改对象属性” 的场景，不能直接替换整个对象
//ref适合 “需要整体替换对象” 的场景
// function handleEdit() {
//     console.log("请求参数：",editAdmin)
//     adminApi.edit(editAdmin.value).then(result=>{//ref创建的响应式对象需要通过.value才能访问到其实际存储的值
//         if (result.code == 200) {
//             // 修改成功
//             editVisible.value = false;
//             ElMessage.success('管理员修改成功')
//             // 重新加载管理员列表
//             loadAdmins();
//         } else {
//             // 修改失败
//             editVisible.value = false;
//             ElMessage.error(result.msg)
//         }
//     }).catch(error=>{
//         // 修改失败
//          ElMessage.error('服务器忙，修改失败')
//     })
// }
function handleEdit() {
    console.log("请求参数：",editAdmin)
    adminApi.edit(editAdmin.value).then(result=>{//ref创建的响应式对象需要通过.value才能访问到其实际存储的值
        if (result.code == 200) {
            // 修改成功
            editVisible.value = false;
            ElMessage.success('管理员修改成功')
            // 重新加载管理员列表
            loadAdmins();
        } else if (result.code === 10019) {
            // 密码修改且是当前登录用户 → 强制登出并跳转登录页
            ElMessage.warning(result.msg); // 提示“密码已修改，请重新登录”
            // 清除本地存储的token（关键：让拦截器感知到登录状态失效）
            localStorage.removeItem('token'); 
            // 跳转到登录页
            router.push('/login'); 
            editVisible.value = false;
        } else {
            // 修改失败
            editVisible.value = false;
            ElMessage.error(result.msg)
        }
    }).catch(error=>{
        // 修改失败
         ElMessage.error('服务器忙，修改失败')
    })
}
</script>

<template>
    <div class="content">
        <!-- 搜索栏 -->
        <el-form :model="pageInfo" :inline="true">
            <el-form-item label="名字" :label-width="60">
                <el-input v-model="pageInfo.name" placeholder="请输入管理员名字"/>
            </el-form-item>
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="pageInfo.phone" placeholder="请输入管理员电话"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch"><el-icon><Search></Search></el-icon></el-button>
            </el-form-item>
        </el-form>
        <div class="bar">
            <el-button type="success" @click="showAdd" >创建管理员</el-button>
        </div>
        <!-- 展示管理员列表：el-table内部已实现数据源遍历逻辑，无需手动写v-for -->
        <el-table :data="admins" :stripe="true" :border="true" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="phone" label="手机号" width="180" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="success"
                        @click="showEdit(scope.row)">编辑</el-button> 
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination class="page" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
            :total="pageInfo.total" :page-sizes="[10, 20, 50, 100]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" @change="loadAdmins" />
    </div>

    <!-- 添加的弹窗 -->
    <el-dialog v-model="addVisible" title="创建新管理员" width="500">
        <el-form :model="addAdmin">
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="addAdmin.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="60">
                <el-input v-model="addAdmin.password" autocomplete="off" show-password/>
            </el-form-item>
            <el-form-item label="姓名" :label-width="60">
                <el-input v-model="addAdmin.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">
                    创建
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 编辑的弹窗 -->
    <el-dialog v-model="editVisible" title="编辑管理员" width="500">
        <el-form :model="editAdmin">
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="editAdmin.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="60">
                <el-input v-model="editAdmin.password" autocomplete="off" show-password/>
            </el-form-item>
            <el-form-item label="姓名" :label-width="60">
                <el-input v-model="editAdmin.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style>

</style>